<template>
  <div class="content">
    <div class="opts">
      <span
        :class="{ opt: true, active: optText == index }"
        v-for="(item, index) in opts"
        :key="index"
        @click="handleClick(index)"
      >
        {{ item }}
      </span>
    </div>
    <div class="list">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="left">
          <img :src="item.picture" alt="" />
        </div>
        <div class="right">
          <div class="name">
            汉堡王 | 
            <span class="address">
              北美新天地餐厅
            </span>
          </div>
          <div class="desc">
            买1送1明星huangbao | 用心火烤 肉质紧实 鲜嫩多汁 爆爆团
          </div>
          <div class="show">
            <div class="show-left">
              <p>爆爆团价</p>
              <div class="jiage">
                ￥<span class="price">
                  25
                </span>
                <span class="discount">
                  5折
                </span>
              </div>
              <div class="ori_price">
                ￥50
              </div>
            </div>
            <div class="show-right">
              <button @click="statusClick(index)">{{flash}}</button>
              <div class="sales">
                已售9029份
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { tuan_list } from "../api/index";

export default {
  data() {
    return {
      optText: 0,
      status: 1,
      flash:'马上抢',
      opts: ["正在抢购", "上新预告"],
      list: [],
    };
  },
  methods: {
    handleClick(index) {
      this.optText = index;
      this.status = index == 0 ? 1 : 0;
    },
    statusClick(index){
      if (this.flash=='马上抢') {
        this.flash='已抢'
      }
      
    }
  },
mounted() {
    tuan_list({ status: this.status }).then((res) => {
      this.list = res.data.list;
    });
  }, 
};
</script>

<style scoped>
.content {
  width: 100%;
  height: 300px;
  position: absolute;
  top: 110px;
  font-size: 14px;
  padding: 5px 10px;
  /* background-color: yellowgreen; */
}
.opts {
  height: 30px;
  display: flex;
  align-items: center;
  color: white;
  margin-bottom: 8px;
  /* background-color: red; */
}
.opt {
  margin-right: 30px;
  cursor: pointer;
}
.active {
  font-weight: 700;
}
.list {
  height: 100%;
  overflow-y: auto;
  /* background-color: aqua; */
}
.item {
  height: 120px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 0 10px;
}
.left {
  width: 100px;
  height: 100px;
  /* background-color: red; */
}
img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.right{
  width: 240px;
  padding-left: 10px;
}
.name{
  font-size: 14px;
  color: gray;
}
.desc{
  font-weight: 700;
}
p,.jiage,.discount{
  font-size: 12px;
  color: red;
}
.show{
  display: flex;
  justify-content: space-between;
}
.price{
  font-size: 14px;
  font-weight: 700;
}
.discount{
  display: inline-block;
  width: 30px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border: 1px solid red;
  border-radius: 5px;
}
.ori_price{
  font-size: 12px;
  color: gray;
  text-decoration: line-through;
}
button{
  width: 60px;
  height: 30px;
  background-color: red;
  color: white;
  border-radius: 20px;
}
.sales{
  color: red;
  font-size: 12px;
}
</style>